<script lang="ts" setup>
import {ref,reactive,watch,watchEffect} from "vue";
// Watch用法: watch(value,()=>{},option)
const str=ref("i3hxd");
const num=ref(66);
// watch(str,(newStr,oldStr)=>{
//     console.log(newStr+","+oldStr);   
// },{immediate:true})
// const stopWatch=watch([str,num],(newStr,oldStr)=>{
//     console.log(newStr,oldStr);
//     if(newStr[1]>30){
//         stopWatch();
//     }
// })
function changeName(){
    if(str.value="i3hxd"){
        str.value="i3szt"
    }else{
        str.value="i3hxd"
    }
}

const SB=ref({
    name:"hxd",
    age:999
})
// watch(SB,(newSB,oldSB)=>{
//     console.log(newSB,oldSB)
// },{deep:true})
function changeSBName(){
    SB.value.name="依旧hxd"
}
function changeSBAge(){
    SB.value.age=666
}
function changeSB(){
    SB.value={
        name:"住飞屋的毛达轼",
        age:66
    }
}
function add1(){
    num.value+=1;
}

//只监视对象中的个别属性
// watch([()=>SB.value.name,()=>SB.value.age],(newSB,oldSB)=>{
//     console.log(newSB,oldSB);
// })

let DSB=reactive({
    name:"猫大师",
    age:1
})
function changeDSBName(){
    DSB.name="依旧猫大师"
}
function changeDSBAge(){
    DSB.age+=1;
}
function changeDSB(){
    // DSB={
    //     name:"种春竹的毛达轼",
    //     age:66
    // }
    // DSB.name="种春竹的毛达轼";
    // DSB.age=66;
    Object.assign(DSB,{name:"种春竹的毛达轼",age:66})
}
// watch(DSB,(newDSB,oldDSB)=>{
//     console.log(newDSB,oldDSB)
// })
// watch([()=>DSB.name,()=>DSB.age],(newSB,oldSB)=>{
//     console.log(newSB,oldSB);
// })
// watchEffect
watchEffect(()=>{
    console.log(num.value)
    console.log(DSB.age)
    if(num.value>70){
        console.log("已大于70");
    }
    if(DSB.age>5){
        console.log("已大于5")
    }
})
</script>

<template>
    <div>
        <h1>{{ str }}</h1>
        <h1>{{ num }}</h1>
        <button @click="changeName">换个人爱</button>
        <button @click="add1">+1</button>
    </div>
    <div>
        <h1>SB的名字:{{ SB.name }}</h1>
        <h1>SB的年龄:{{ SB.age }}</h1>
        <button @click="changeSBName">修改SB的名字</button>
        <button @click="changeSBAge">修改SB的年龄</button>
        <button @click="changeSB">换个SB</button>
    </div>
    <div>
        <h1>大SB的名字:{{ DSB.name }}</h1>
        <h1>大SB的年龄:{{ DSB.age }}</h1>
        <button @click="changeDSBName">修改大SB的名字</button>
        <button @click="changeDSBAge">修改大SB的年龄</button>
        <button @click="changeDSB">换个大SB</button>
    </div>
</template>

<style scoped>
    button{
        border-radius: 5px;
        width: 175px;
        height: 50px;
        background-color: rgb(115, 115, 202);
        color: white;
        font-size: 20px;
        margin-right: 5px;
        margin-bottom: 15px;
        font-family: 'Courier New', Courier, monospace;
    }
    div{
        margin-bottom: 10px;
        text-align: center;
        border: 1px solid hotpink;
        border-radius: 5px;
        width: 550px;
    }
</style>